<template>
  <view class="app">
    <view class="app-head">
      <view class="app-logo" />
    </view>
    <!-- <view class="app-footer" /> -->
    <view class="login">
      <view class="sendCode" v-if="phone" @tap="getCodeInShare">发送</view>
      <input
        type="tel"
        maxlength="11"
        v-model="phone"
        placeholder="请输入手机号"
        class="tel"
      />
      <input
        type="number"
        maxlength="6"
        v-model="code"
        placeholder="请输入验证码"
        class="code"
      />
      <view class="btn" @tap="submit"></view>
    </view>
  </view>
</template>

<script>
import { isAndroid } from "@/common/bridge.js";
export default {
  name: "share",
  data() {
    return {
      phone: "",
      code: "",
      androidUrl: "",
      iosDownUrl: "",
    };
  },
  mounted() {
    this.androidUrl = this.vuex_h5Config.andrDownUrl;
    this.iosDownUrl = this.vuex_h5Config.iosDownUrl;
  },
  methods: {
    getCodeInShare() {
      const _this = this;
      if (
        !this.phone ||
        /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/.test(
          this.phone
        ) === false
      ) {
        uni.showToast({
          title: "请输入正确的手机号",
          icon: "none",
        });
        return;
      }
      this.$u.api
        .getCodeInShare({
          tel: this.phone,
        })
        .then((res) => {
          if (res.code === 444) {
            uni.showToast({
              title: "检测到已注册，即将跳转到登录页",
              icon: "none",
            });
            _this.jump();
            return;
          }
          uni.showToast({
            title: "验证码发送成功",
            icon: "none",
          });
        });
    },
    submit() {
      const _this = this;
      if (!this.code) {
        uni.showToast({
          title: "请输入验证码",
          icon: "none",
        });
        return;
      }
      this.$u.api
        .getCodeInRegister({
          code: this.code,
          phoneNo: this.phone,
        })
        .then((res) => {
          uni.showToast({
            title: "注册成功, 即将跳转到下载页面",
            icon: "none",
          });
          _this.jump();
        });
    },
    jump() {
      var ua = navigator.userAgent.toLowerCase();
      const _this = this;
      setTimeout(() => {
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
          uni.showToast({
            title: "检测到当前处于微信浏览器，请在系统浏览器内打开",
            icon: "none",
          });
          return;
        }
        if (isAndroid) {
          window.location.href = _this.androidUrl;
        } else {
          window.location.href = _this.iosDownUrl;
        }
      }, 2000);
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #c8e3fe;
}

.app {
  width: 100%;
  width: 100%;
  position: relative;
  width: 750rpx;
  height: 1125rpx;
  &-head {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: url("//static.xyb2b.com/images/52ff0a48a055cb7fa1173a94484d9aff.png")
      no-repeat;
    background-size: 100% auto;
    width: 750rpx;
    height: 1125rpx;
    position: relative;
    z-index: 1;
    pointer-events: none;
  }
  &-footer {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: url("http://static.xyb2b.com/images/8d91fdf0b72143fad6dc42aa5c4f5586.jpg")
      no-repeat;
    width: 100%;
    background-size: 100% auto;
    min-height: 100vh;
    pointer-events: none;
    position: relative;
    z-index: 1;
  }
  &-logo {
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 360rpx;
    transform: translateX(-50%);
    background: url("//static.xyb2b.com/images/752b1aed77356eb5e23d134f5982a236.png")
      no-repeat;
    width: 300rpx;
    background-size: 100% auto;
    pointer-events: none;
    z-index: 1;
  }
}

.login {
  position: absolute;
  top: 380rpx;
  left: 50%;
  transform: translateX(-50%);
  background-image: url("//static.xyb2b.com/images/e9c7d0e3f799cb566a8954845c9f6e5a.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 600rpx;
  height: 345rpx;
  z-index: 999;
}

.tel {
  position: absolute;
  right: 30rpx;
  top: 40rpx;
  height: 44rpx;
  width: 400rpx;
  border: none;
  outline: none;
}

.sendCode {
  position: absolute;
  right: 30rpx;
  top: 40rpx;
  height: 44rpx;
  width: 100rpx;
  background-color: #f9d446;
  line-height: 44rpx;
  text-align: center;
  border-radius: 22rpx;
  z-index: 99;
}

.code {
  position: absolute;
  right: 30rpx;
  top: 130rpx;
  height: 44rpx;
  width: 400rpx;
  outline: none;
  border: none;
}

.btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 54rpx;
  border-radius: 38rpx;
  width: 290rpx;
  height: 76rpx;
  /* background-color: yellow; */
}
</style>